<script setup>
import {onMounted, reactive} from 'vue'
import { ElMessage } from "element-plus"
// import {GetPortsListApi} from '../../wailsjs/go/main/App'
const state = reactive({
  name: "",
  resultText: "Please enter your name below 👇",
  ports: [],
  bauds: [4800,9600,14400,19200],
 
  form: {
    port: "",
    baud: 9600,
  },
  scanBtnLoad: false,
  scanTime: 0,
  deviceInfo: {
    addr: 0x00,
    baud: 0,
    send: "",
    read: "",
  }
})

onMounted(() => {
  getPort();
})

// 获取串口列表
function getPort() {
  const fun = window['go'] && window['go']['main']['App']['GetPortsListApi'] ? window['go']['main']['App']['GetPortsListApi'] : '';
  // 获取到串口
  fun && fun().then(res => {
    console.log(res)
    try {
      const data = JSON.parse(res);
      console.log(data)
      if (!data.code) return ElMessage.error(data.msg);
      state.ports = data.data ?? [];
      if (state.ports.length) state.form.port = state.ports[0];
      ElMessage.success("串口列表:" + state.ports.length);
    } catch(err) {
      state.ports = [];
      console.log(err)
      ElMessage.error("串口获取列表失败");
    }
  })
}

// 自动连接
function onConn() {
  if (!state.form.port) return ElMessage.error("请选择串口");
  console.log("开始扫描",state.form.port)
  ElMessage.info("开始扫描中...")
  const fun = window['go'] && window['go']['main']['App']['ScanDeviceApi'] ? window['go']['main']['App']['ScanDeviceApi'] : '';
  // 获取到串口
  state.scanBtnLoad = true;
  const time = Date.now()
  fun && fun(state.form.port).then(res => {
    try {
      const data = JSON.parse(res);
      if (!data.code) return ElMessage.error(data.msg);
      
      console.log(data)
      state.deviceInfo = data.data;
      state.scanBtnLoad = false;
      state.scanTime = Math.floor((Date.now() - time) / 1000 * 100)/100
      ElMessage.success("扫描成功，用时：" + state.scanTime + '秒');
    } catch(err) {
      state.scanTime = Math.floor((Date.now() - time) / 1000 * 100)/100
      ElMessage.error("扫描失败，用时：" + state.scanTime  + '秒');
      state.scanBtnLoad = false;
    }
  })
}
</script>

<template>
  <div>
    <el-card header="485设备自动搜索" style="height:calc(100vh - 4px);">
      <el-form :data="state.form" label-width="auto">
        <el-form-item label="串口">
          <el-select v-model="state.form.port" placeholder="请选择串口">
            <el-option v-for="key,item in state.ports" :label="key" :value="key" />
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="波特率">
          <el-select v-model="state.form.bauds" multiple  placeholder="请选择波特率">
            <el-option v-for="key,item in state.ports" :label="key" :value="key" />
          </el-select>
        </el-form-item> -->

        <!-- <el-form-item label="波特率">
          <el-select v-model="state.form.baud" placeholder="请选择串口">
            <el-option v-for="key,item in state.bauds" :label="key" :value="key" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="操作">
          <el-button v-loading="state.scanBtnLoad" type="primary" @click="onConn">自动搜索</el-button>
          &nbsp;&nbsp;点击后会自动进行搜索设备 匹配成功会出现在下方 &nbsp;(标准的485设备都可以扫描) (待完成：奇偶校验）
        </el-form-item>

        <template v-if="state.deviceInfo.baud > 0">
          <el-divider content-position="left">扫描设备如下：</el-divider>
          <el-form-item label="&nbsp;">
            <el-descriptions title="" border style="width:100%;" :column="3">
              <el-descriptions-item label="耗时">{{ state.scanTime }}秒</el-descriptions-item>
              <el-descriptions-item label="地址位">{{ state.deviceInfo.addr }}</el-descriptions-item>
              <el-descriptions-item label="波特率">{{ state.deviceInfo.baud }}</el-descriptions-item>
              <el-descriptions-item label="测试报文">{{ state.deviceInfo.send }}</el-descriptions-item>
              <el-descriptions-item label="响应报文">{{ state.deviceInfo.read }}</el-descriptions-item>
              <el-descriptions-item label="描述">
                地址位16进制 0x{{ state.deviceInfo.addr.toString(16) }}
                {{ state.scanBtnLoad ? '正在扫描中...' : '' }}
              </el-descriptions-item>
            </el-descriptions>
          </el-form-item>
        </template>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>
</style>
